import React, { useMemo } from 'react';
import classNames from 'classnames';
import { getBrowserVersion } from '@y.dsh/utils/lib/utils';
import { svgAttr } from './config';
import { Props } from './icon';

// 成功
function Success(props: Props): JSX.Element {
  const {
    fontSize = 30,
    color = '#1aad19',
    animation = false
  } = props;

  const allowAnimation = useMemo(() => getBrowserVersion() !== 'IE' && animation, [animation]);
  const r = useMemo(() => 170, []); // 半径
  const p = useMemo(() => 2 * Math.PI * r, [r]); // 周长
  const circleOffset = useMemo(() => allowAnimation ? p : 0, [allowAnimation, p]);
  const pathOffset = useMemo(() => allowAnimation ? 235 : 0, [allowAnimation]);

  return (
    <svg
      {...svgAttr}
      fontSize={fontSize}
      color={color}
    >
      <circle
        className={classNames(
          'easy-icon-circle-rotateX180',
          { 'easy-icon-animation': allowAnimation }
        )}
        cx="200"
        cy="200"
        r={r}
        stroke="currentColor"
        fill="transparent"
        strokeWidth="20"
        strokeDashoffset={circleOffset}
        strokeDasharray={p}
      />
      <path
        className={classNames(
          { 'easy-icon-animation': allowAnimation },
          'easy-icon-animation-duration040',
          'easy-icon-animation-delay010'
        )}
        stroke="currentColor"
        fill="transparent"
        strokeWidth="20"
        strokeDashoffset={pathOffset}
        strokeDasharray="235"
        d="M 130 230 L 190 270 L 280 140"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}

export default Success
